<template>
    <div class="div-container">
        <!-- 轮播图区域 -->
        <div class="lunbocontainer">
            <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunboList" :key="item.id">
              <img :src="item.imgUrl" alt="">
            </mt-swipe-item>
        </mt-swipe>
        </div>
        

        <!-- 中间的tabtite -->
        <div class="box">
        <div id="slider" class="mui-slider mui-fullscreen">
          <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
              <a :class="['mui-control-item',item.id==1?'mui-active':'']" v-for="item in tabTitle" :key="item.id" @click="getContent(item.id)">
                {{item.title}}
              </a>
					</div>
				</div>
			</div>


        <ul class="content">
          <li v-for="item in content" :key="item.itemId">
            <img :src="item.src" alt="">
            <div class="right">
              <h5>{{item.name}}
                <!-- <img class="icon_hot" src="https://downqn.tuyoo.com/offical_accounts/gameBox/icon_tag@2x.png"/> -->
              </h5>
              <p class="desc">{{item.describe}}</p>
              <p class="many">{{item.people}}万人在玩</p>
            </div>
            <button>进入</button>
          </li>
          
          
          
        </ul>
      </div>
        <!-- <p>{{this.$store.getters.a}}122121</p> -->

    </div>
</template>

<script>
import '../../common.css'
import '../../fun.scss'
import '../../lib/mui/js/mui.min.js'
export default {
  data () {
    return {
        lunboList:[],
        tabTitle:[],
        content:[]
        
    }
  },
  created() {
    this.getlunboList()
    this.gettiteList(1)
    this.getContent()
  },
  methods: {
      getlunboList(){
          this.$http.get('http://wx.tuyoo.com/?act=winnie.sunbanner').then(result => {
              if(result.body.code == 0){
                  //console.log('ok')
                  this.lunboList = result.body.bannner
                  //console.log(this.lunboList)
              }
          })
      },
      gettiteList(){
          this.$http.get('src/ajax_tabs.json').then(result => {
              if(result.body.retCode ==  1){
                  this.tabTitle = result.body.data.tabs
                  //var a = this.tabTitle
                  var id =[]
                  this.tabTitle.forEach( item =>{
                    id = item.id
                    console.log(id)
                  })
              } 
          })
          
      },
      getContent(id){
          this.$http.get('http://h5game.tuyoo.com/?act=game.getinfo&tab='+id).then(result=>{
              if(result.body.retCode == 1){
                  //console.log(result.body.data.list)
                  this.content = result.body.data.list
              }
              
          })
      }
  },
    
}
</script>

<style lang="scss" scoped>
.div-container{
    // position: absolute;
     top: 0;
     bottom: 0.5rem;
     overflow-y:scroll
}
.box{
  position: absolute;
   top: 1.5rem;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-y: scroll
}

.lunbocontainer{
  position: relative;
  left: 0;
  top: 0;
}

.mint-swipe{
  // position: absolute;
  top:0;
  left:0;
  height: 1.5rem;
    .mint-swipe-item{
      // position: fixed;
      img{
        //height: 1.5rem;
        width: 100%
      }
    }
}


#slider{
  //  position: fixed;
  top: 0;
  left: 0;
  .mui-segmented-control.mui-scroll-wrapper .mui-control-item {
    display: inline-block;
    width: auto;
    padding: 0 0.15rem;
    border: 0;
    font-size: 0.15rem;
    line-height: 0.47rem;
    text-align: center;
  }
}

.content{
  position: absolute;
  top: 0.47rem;
  //padding-top: 0.47rem;
  width: 100%;
  // overflow-y: scroll;
  overflow: scroll;
  li{
      cursor: pointer;
      width: 3.6rem;
      height: 0.6rem;
      padding-left: 0.15rem;
      margin-bottom: 0.2rem;
      img{
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 0.1rem;
        float: left;
      }
      .right{
        float: left;
        margin-left: 0.08rem;
         

        h5{
          color: #000000;
          font-size: 0.15rem;
          .icon_hot {
            width: 0.15rem;
            height: 0.15rem;
            vertical-align: text-top;
            margin-right: 1rem;
            float: right;
        }
        }
        .desc{
          width: 2.04rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 0.11rem;
          vertical-align: middle;
          // line-height: 1.5em;
          margin-top: 0.08rem;
        }
        .many{
          font-size: 0.11rem;
          // line-height: 0.75rem;
          margin-top: 0.05rem;
        }
      }
      button{
        width: 0.504rem;
        margin-top: 0.14rem;
        line-height: 0.26rem;
        background: #EC414D;
        text-align: center;
        font-size: 0.13 rem;
        color: #fff;
        float: right;
      }
  }
  
}
</style>

